<template>
  <div class="wrapper">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @blur="cun"
      />
    </form>
    <div v-show="flag" style="padding:0 15px">
      <h2>
        搜索历史
        <span @click="del" style="float: right; color: #ccc">
          <span style="font-size: 14px">清除历史</span
          ><van-icon style="vertical-align: middle" name="delete-o"
        /></span>
      </h2>

      <p v-for="(item, index) in testList" :key="index">
        {{ item }}
      </p>
    </div>
    <div
      v-for="(item, index) in arr"
      :key="index"
      v-show="!flag"
      style="margin-top: 10px; background: white; padding: 10px"
    >
      <!-- 标题 -->
      <router-link
        :to="{ path: '/detail', query: { id: item.postsId } }"
        tag="div"
      >
        <b>{{ item.title }}</b>
        <div style="display: flex">
          <div style="width: 70%">
            <div class="name">
              <van-image
                round
                width="20px"
                height="20px"
                style="vertical-align: middle"
                :src="item.avatar"
              />
              <span style="margin-left: 5px; font-weight: bolder">{{
                item.userName
              }}</span>
            </div>
            <!-- 内容 -->
            <p class="p1">
              {{ item.intro }}
            </p>
          </div>
          <div style="width: 30%">
            <img :src="item.coverImgUrl" alt="" style="width: 100%" />
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { search } from "../api/api";
export default {
  data() {
    return {
      flag: true,
      value: "",
      arr: [],
      testList: [],
    };
  },
  methods: {
    onSearch(val) {
      search(val).then((res) => {
        if (res.total == 0) {
          Toast("不存在该帖子哦");
        } else {
          // console.log(res);
          this.arr = res.rows;
        }
      });
      this.flag = false;
      this.$store.dispatch("saveTest", this.value);
    },
    onCancel() {
      this.$router.push("/");
    },

    cun() {
      this.flag = true;
      this.testList = this.$store.getters.getTest;
    },
    del() {
      this.testList = [];
    },
  },
};
</script>
<style scoped lang="less">
.wrapper {
  background-color: #f7f8fa;
}
/deep/.van-search__content {
  border-radius: 20px;
}
.input {
  margin-bottom: 10px;
}
.p1 {
  /* 多行溢出隐藏 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/deep/b {
  font-size: 16px;
  color: black;
}
.name {
  margin: 5px 0;
}
</style>